import React, {useEffect, useState} from "react";
import {createStyles} from "antd-style";
import PhotoView2 from "@/components/page/PhotoPage2/PhotoView2.tsx";
import PhotoController2 from "@/components/page/PhotoPage2/PhotoController2.tsx";
import {getContainerInfo} from "@/api/PhotoApi.ts";
import ContainerInfo from "@/components/page/PhotoPage2/ContainerInfo.tsx";

const useStyles = createStyles(({css, token}) => {
    return {
        container: css`
            width: 100%;
        `
    }
})

const PhotoPage2: React.FC = () => {
    const styles = useStyles().styles;
    const [photoContainerIndex, setPhotoContainerIndex] = useState<number>(0)
    const [photoInfo, setPhotoInfo] = useState<[{name: string, size: number}] | null>(null)

    useEffect(() => {
        getContainerInfo().then((data) => {
            setPhotoInfo(data.data.data)
        })
    }, []);

    if (photoInfo == null) {
        return (
            <div className={styles.container}>loading</div>
        )
    }

    return (
        <div className={styles.container}>
            <ContainerInfo props={{photoInfo: photoInfo, index: photoContainerIndex}}/>
            <PhotoView2 props={{photoContainerIndex, photoInfo}}/>
            <PhotoController2 props={{photoContainerIndex,  setPhotoContainerIndex, photoInfo}}/>
        </div>
    )
}

export default PhotoPage2;
